#include("../../comm/ListHead.html")
<style>
    .td70 td .layui-table-cell{ height:70px; line-height:70px; padding:0px; margin:0px }
    .td70 td .line-2{ line-height:26px; padding-top:9px; padding-bottom:9px }
    .td70 td .line-3{ line-height:20px; padding-top:5px; }
    .td70 td .line-img{ border:1px; height:66px; width:90px }
    .td70 td .title-2{  height:52px;line-height:26px; margin-top:9px; overflow:hidden; text-overflow:inherit; white-space:normal; word-break:break-all; }
    .td70 td .title-3{ height:60px;line-height:20px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-all; }

</style>
<div class="layui-fluid layui-anim layui-anim-scale">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="card-search SearchTable">
                    <p style="float:right">
                        <input type="text" id="test_id" placeholder="编号" class="table-search-text width120"/>
                        <input type="text" id="test_name" placeholder="名称" class="table-search-text width200"/>

                        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="DoSearch">
                            搜索
                        </button>
                        <button class="layui-btn btn-search-adv layui-btn-sm" lay-event="DoSearchMore">高级搜索</button>

                    </p>
                    <i class="layui-icon layui-icon-slider"></i>
                    <span class="color_green">列表示例高度两行(行高70px)</span>
                </div>
                <div class="layui-card-body td70">
                    <table class="layui-hide" id="table_1" lay-filter="table_1"></table>

                    <script type="text/html" id="table_1_bar_title">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm btn-add" lay-event="AddTestTable">
                                <i class="layui-icon">&#xe608;</i> 添加开发测试
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-one="btn-edit" lay-event="EditTestTable">修改</button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-one="btn-del" lay-event="DelTestTable">删除</button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-more="btn-del-more" lay-event="DelMoreTestTable">批量删除</button>
                            <button class="layui-btn layui-btn-sm layui-btn-disabled" permission-one="btn-change-13" lay-event="MoreButton">更多<i class="layui-icon layui-icon-down"></i></button>
                        </div>
                        <div id="bar_desc">列表备注说明

                        </div>
                    </script>
                    <script type="text/template" id="SearchMoreTemp">
                        <form class="layui-form">
                            <div class="margin-10"><input type="text" id="test_title" placeholder="标题" autocomplete="off" class="layui-input"></div>
                            <div class="margin-10"><input type="text" id="test_url" placeholder="名称" autocomplete="off" class="layui-input"></div>
                        </form>
                    </script>
                    <script type="text/html" id="temp_pub_tag">
                        <div class="line-2">
                            <input type="checkbox" lay-skin="switch" field="pub_tag" msg="发布" value="{{d.test_id}}" lay-text="ON|OFF" lay-filter="ChangeTag" {{ d.pub_tag ? 'checked' : '' }}><br/>
                            <input type="checkbox" lay-skin="switch" field="pub_tag" msg="发布" value="{{d.test_id}}" lay-text="ON|OFF" lay-filter="ChangeTag" {{ d.pub_tag ? 'checked' : '' }}>
                        </div>
                    </script>
                    <script type="text/html" id="temp_action">
                        <div class=" line-2">
                            <a class="layui-btn layui-btn-xs btn-edit">编辑信息</a><br/>
                            <a class="layui-btn layui-btn-xs btn-change-13" lay-event="Test">更多&nbsp;<i class="layui-icon layui-icon-down"></i>&nbsp;</a>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script language="JavaScript">

    layui.use(['myTable', 'table', 'form', 'util', 'myTool', 'drawer', 'dropdown', 'element'], function () {
        var $ = layui.$, table = layui.table, myTable = layui.myTable, myTool = layui.myTool, dropdown = layui.dropdown;

        /**
         * 工具栏事件
         */
        layui.table.on('tool(table_1)', function (obj) {
            var that = this;
            myTool.tool(this, obj, {
                Test: function (data) {
                    dropdown.render({
                        elem: that, show: true
                        , data: [{
                            title: '设置权限', id: 'aaa', templet: '<div><i class="layui-icon layui-icon-picture"></i>&nbsp;{{d.title}}</div>'
                        }, {title: '配置用户', id: 'bbb'}, {title: '删除数据', id: 'del'}]
                        , click: function (data, othis) {
                            if (data.id === 'del') {
                                layer.confirm('真的删除行么', function (index) {
                                    obj.del();
                                    layer.close(index);
                                });
                            } else {
                                layer.msg('得到表格下拉菜单 id：' + data.id);
                            }
                        }
                        , align: 'right', className: 'site-dropdown2', style: 'width:80px'
                    });
                }
            });
        });


        /**
         * 表格
         */
        tableindex = layui.myTable.render({
            elem: '#table_1', url: 'TestTable2ListDataApi'
            , title: '列表'
            , where: {}
            , cols: [[
                {type: 'checkbox', width: 36, fixed: true}
                , {field: 'test_id', title: '编号', width: 80, sort: true}
                , {field: 'test_name', title: '名称', width: 100, text: {show: true, class: 'line-3', html: '行一<br/>行二<br/>行三'}}
                , {field: 'test_title', title: '标题', width: 100, text: {show: true, class: 'line-2', html: '开始:{{d.online_begin}}<br/>结束:{{d.online_end}}'}}
                , {field: 'test_img', title: '图片', width: 120, align: 'center', image: {show: true, class: 'line-img', url: 'test_img_view'}}
                , {field: 'test_icon', title: '图标', width: 70, align: 'center', templet: '<div><li class="layui-icon {{ d.test_icon }}"></li></div>'}
                , {field: 'test_color', title: '颜色', width: 70, align: 'center', templet: '<div><button class="layui-btn layui-btn-xs" style="width:60px;background-color:{{d.test_color}};">{{d.test_color}}</button></div>'}
                , {field: 'sindex', title: '顺序', width: 60, edit: 'text', align: 'center'}
                , {field: 'test_desc', title: '备注2', width:200, text: {show: true, class: 'title-2'}}
                , {field: 'test_desc', title: '备注3', text: {show: true, class: 'title-3'}}
                , {field: 'pub_tag', title: '发布', width: 60, align: 'center', templet: '#temp_pub_tag'}
                , {title: '操作', width: 110, align: 'center', templet: '#temp_action'}
            ]]
            , page: true, limit: 6, limits: [6, 10, 50, 100, 2000]
            , serviceSort: true, initSort: {field: 'test_id', type: 'desc'}
            , editField: {url: 'ModifyTestTableFieldApi', key: 'test_id'}
            , done: function (res, curr, count) {
                layui.element.render();
                console.info($("tr")[3]);

            }
        });

        drawer1 = layui.drawer.render({
            title: '<b><i class="layui-icon layui-icon-app"></i> 高级搜索</b>', offset: 'r', width: "300px", content: SearchMoreTemp.innerHTML,
            btn: ['<i class="layui-icon">&#xe615;</i>搜索', '重置'],
            success: function (layero, index) {
                layui.form.render('select');
            },
            btn1: function (index, layero) {
                tableindex.reload({
                    where: {s: {test_name: $(layero).find("#test_title").val(), test_title: $("#test_title").val()}}, page: {curr: 1}
                });
            },
            btn2: function (index, layero) {
                $(layero).find("form")[0].reset();//重置
                return false;
            }
        });


        /**
         * 按钮事件
         */
        layui.util.event("lay-event", {
            DoSearch: function () {
                tableindex.reload({
                    where: {s: {test_id: $("#test_id").val(), test_name: $("#test_name").val()}}, page: {curr: 1}
                });
            }
            , DoSearchMore: function () {
                layui.form.render();
                drawer1.open();
            }
        });

        /**
         * 工具栏事件
         */
        layui.table.on('toolbar(table_1)', function (obj) {
            var that = this;
            myTool.toolbar(this, obj, {
                AddTestTable: function () {
                    index = top.layer.open({
                        type: 2, offset: '60px', area: ['800px', '580px'], title: ['添加开发测试', 'font-size:15px;'],
                        content: ["testtable/AddTestTable", 'no'],
                        end: function () {
                            tableindex.reload({});
                        }
                    });
                }
                , EditTestTable: function () {
                    myTool.doSingleSelect(layui.myTable.checkStatus('table_1'), {}, function (data, keys) {
                        index = top.layer.open({
                            type: 2, offset: '60px', area: ['800px', '580px'], title: ['修改开发测试[' + data[0].test_id + ']', 'font-size:15px;'],
                            content: ["testtable/EditTestTable?test_id=" + data[0].test_id, 'no'],
                            end: function () {
                                tableindex.reload({});
                            }
                        });
                    });
                }
                , DelTestTable: function () {
                    myTool.doSingleSelect(layui.myTable.checkStatus('table_1'), {}, function (data, keys) {
                        index = top.layer.confirm('你是否确认删除开发测试【' + data[0].test_id + '】', {icon: 3, title: '提示', offset: '150px'}, function (index2) {
                            myTool.postMsg("DelTestTableApi", {
                                test_id: data[0].test_id
                            }, function () {
                                top.layer.close(index2);
                                tableindex.reload();
                            });
                        });
                    });
                }
                , DelMoreTestTable: function () {
                    myTool.doMoreSelect(layui.myTable.checkStatus('table_1'), {key: 'test_id'}, function (data, keys) {
                        index = top.layer.confirm('你是否确认批量删除选中的【' + data.length + '】数据', {icon: 3, title: '提示', offset: '150px'}, function (index2) {
                            myTool.postMsg("DelMoreTestTableApi", {
                                keys: keys
                            }, function () {
                                top.layer.close(index2);
                                tableindex.reload();
                            });
                        });
                    });
                }
                , MoreButton: function () {
                    layui.myTool.doSingleSelect(table.checkStatus('table_1'), {key: 'emp_id'}, function (datas, keys) {
                        dropdown.render({
                            elem: that, show: true, align: 'left', className: 'site-dropdown', style: 'width:80px'
                            , data: [{title: '权限配置', id: 'set'}, {title: '重置密码', id: 'pwd'}, {title: '摸拟登陆', id: 'login'}]
                            , click: function (data, othis) {
                                layer.msg(data.id + datas[0].test_id);
                            }
                        });
                    });
                }
            });
        });
        layui.form.on('checkbox(ChangeTag)', function (obj) {
            myTool.postMsg("ChangeTagApi", {key: this.value, field: $(obj.elem).attr("field"), msg: $(obj.elem).attr("msg")}, function (result) {
                layer.tips(result.msg, obj.othis);
            });
        });
        layui.form.on('switch(ChangeTag)', function (obj) {
            myTool.postMsg("ChangeTagApi", {key: this.value, field: $(obj.elem).attr("field"), msg: $(obj.elem).attr("msg")}, function (result) {
                layer.tips(result.msg, obj.othis);
            });
        });

    });

    layui.use(['myDragSort'], function () {
        layui.myDragSort.render({
            pelem: '.layui-form', elem: '.layui-row', done: function (curr, b, e) {
            }
        });
    });
</script>
#include("../../comm/Foot.html")